<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>工具</title>
  <link crossorigin="" rel="icon" type="image/x-icon" href="./favicon.ico">
  <link rel="stylesheet" type="text/css" href="./dist/index.css">
  <link rel="stylesheet" type="text/css" href="./dist/tooltip.min.css">
  <script src="./dist/jquery.min.js"></script>
  <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
  <script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    #list li{
      line-height:1.8;
      border-radius:10px;
      background:repeating-linear-gradient(-45deg,#e8544d 0px 10px,#fff 10px 20px,#75adf8 20px 30px,#fff 30px 40px) -20px -20px/200% 200%;
      padding:5px;
      cursor: pointer;
    }
    #list li .div{
      padding:10px;
      background:#fff;
    }
    #list li:hover{
      background-position: 0 0 !important;
    }
  </style>
</head>

<body>
  <!-- 列表 -->
  <div class="body">
    <div class="main">
      <ul id="list">
        <li v-for="item in items" @click="toPage(item.url)">
          <div class="div">
            {{item.name}}
          </div>
        </li>
      </ul>
    </div>
  </div>

  <script>
    const tools = [
      { name:'下载页面',url:'download.html'},
      { name:'pdf转图片',url:'pdf/index.html'},
      { name:'今天吃啥',url:'eat/index.html'}
    ]
    const { createApp, ref } = Vue
    createApp({
      setup() {
        const items = ref(tools)
        function toPage(url){
          let {
            href
          } = window.location
          window.location.href = href+url
        }
        return {
          items,
          toPage
        }
      }
    }).mount('#list')
  </script>
</body>

</html>